<template>
    <div>
        <!-- 容器布局 -->
        <el-container>
            <!-- 头部 -->
            <el-header>
                <h3>小U商城大型后台管理系统</h3>
                <div class="user">
                    <h4>欢迎：{{ userInfo.username }}</h4>
                    <div>
                        <el-button icon="el-icon-s-unfold" circle @click="exit"></el-button>
                    </div>
                </div>
            </el-header>
            <el-container>
                <!-- 侧边容器 -->
                <el-aside width="220px">
                    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" background-color="#545c64"
                        text-color="#fff" active-text-color="#ffd04b" router>
                        <el-menu-item index="/home">
                            <i class="el-icon-s-operation"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-submenu v-for="item in userInfo.menus" :index="item.id.toString()" :key="item.id">
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{ item.title }}</span>
                            </template>
                            <el-menu-item v-for="menu in item.children" :key="menu.id" :index="menu.url">
                                {{ menu.title }}
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 主体容器 -->
                <el-main>
                    <!-- 开放二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
// 引入辅助性函数
import { mapGetters } from 'vuex';
export default {
    data() {
        return {
            defaultActive: "/home"
        };
    },
    mounted() {
        this.defaultActive = this.$route.path
    },
    computed: {
        ...mapGetters({
            userInfo: "getUser"
        })
    },
    methods: {
        // 退出登录
        exit() {
            this.$confirm("你确定要退出登录吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                // 清除本地管理员信息
                sessionStorage.removeItem("userInfo")
                // 跳转到登录页
                this.$router.push("/login")
            }).catch(() => {
                this.$message.error("取消退出登录");
            })
        }
    }
};
</script>

<style scoped lang="less">
.el-container {
    .el-header {
        background-color: darkorange;
        color: #fff;
        display: flex;
        justify-content: space-between;

        .user {
            display: flex;

            h4 {
                color: #ffe862;
                margin-right: 20px;
            }

            div {
                margin-top: 12px;
            }
        }
    }

    .el-aside {
        .el-menu {
            height: 670px;
        }
    }

}
</style>
